import Vue from 'vue'
import 'jquery'
import 'assets/dropload.js'
import 'assets/dropload.css'

var dropLoader = Vue.component('drop-loader',  {
        data:function () {
            return {
                itemsAdded: []
            }
        },
        props:{
            loadUp:{
                type: Function,
                required: false,
                default: null
            },
            loadDown:{
                type: Function,
                required: false,
                default: null
            }
        },
        mounted:function () {
            var vm = this;
            dropload = $(this.$el).dropload({
                domUp : {
                    domClass   : 'dropload-up',
                    domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
                        domUpdate  : '<div class="dropload-update">↑释放更新</div>',
                        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
                    },
                    domDown : {
                        domClass   : 'dropload-down',
                        domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                        domNoData  : '<div class="dropload-noData">暂无数据</div>'
                    },
                    loadUpFn : vm.loadUp == null ? '' : function(me){
                        vm.loadUp()
                            .then(function (items) {

                                if(items.length === 0) {
                                    dropload.noData(true)
                                }
                                else {
                                    vm.itemsAdded = items.concat(vm.itemsAdded);
                                }

                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            })
                            .catch(function (error) {
                                console.log('%cloadUpFn出错了，'+ error, 'color:red')
                                // 即使加载出错，也得重置
                                dropload.resetload();
                            });
                    },
                    loadDownFn : vm.loadDown == null ? '' : function(me){
                        vm.loadDown()
                            .then(function (items) {
                                if(items.length === 0) {
                                    dropload.noData(true)
                                }
                                else {
                                    vm.itemsAdded = vm.itemsAdded.concat(items);
                                }
                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            })
                            .catch(function (error) {
                                console.log('%cloadDownFn出错了，'+ error, 'color:red')
                                // 即使加载出错，也得重置
                                dropload.resetload();
                            });
                    },
                });

            var dropload;
        },
        render: function (createElement) {
            let child = createElement('div', {}, this.itemsAdded.map( item=>this.$scopedSlots.default({ item: item }) ))
            return createElement(
                'div',
                {
                    style:{
                        width: '100%',
                        height: '100%',
                        overflow: 'scroll'
                    }
                },
                [child]
            )
        }
    }
);

export default dropLoader